<template>
    <div>
        <div class="d-flex text-center py-2 bg-white p-3">
            <div class="btn mr-2 flex-1 py-3">
                <svg class="icon fs-xxl mr-2" aria-hidden="true">
                    <use xlink:href="#icon-Player"></use>
                </svg>
                英雄介绍视频</div>
            <div class="btn ml-2 flex-1 py-3">
                <svg class="icon fs-xxl mr-2" aria-hidden="true">
                    <use xlink:href="#icon-image"></use>
                </svg>
                一图识英雄</div>
        </div>

        <div class="p-3 mb-2 bg-white" >
            <div class="d-flex jc-between skill my-2">
                <img v-for="(item,key) in model.skills" :key="key" 
                :src="item.icon"  class="icon" @click="currentIndex = key" alt=""
                :class="{active:currentIndex == key}">
            </div>
            <div v-if="currentSkill">
                <div class="d-flex ai-center">
                    <h3 class="pr-4">{{currentSkill.name}}</h3>
                    <span class="fs-sm text-grey">(冷却值:{{currentSkill.cd}} 消耗：{{currentSkill.cost}})</span>
                </div>
                <div class="text-dark-1">
                    <p class="mt-0">{{currentSkill.info}}</p>
                    <p class="mt-0 tips">小提示：{{currentSkill.tips}}</p>
                </div>
            </div>
        </div>

        <hero-card title="出装推荐" icon="menu">
            <div slot="body" v-if="model.equips">
                <div class="pt-2 pb-1 easy">
                    <div class="fs-md">顺风出装</div>
                    <div class="d-flex jc-between text-center fs-xs pt-2">
                        <div v-for="(item,key) in model.equips.easy" :key="key">
                            <img class="item-icon" :src="item.icon" alt="">
                            <div>{{item.name}}</div>
                        </div>
                    </div>
                </div>
                <div class="pt-2">
                    <div class="fs-md">逆风出装</div>
                    <div class="d-flex jc-between text-center fs-xs pt-2">
                        <div v-for="(item,key) in model.equips.hard" :key="key">
                            <img class="item-icon" :src="item.icon" alt="">
                            <div>{{item.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </hero-card>
        <hero-card title="使用技巧" icon="menu">
            <div slot="body">
                <p class="tips">{{model.usageTips}}</p>
            </div>
        </hero-card>
        <hero-card title="对抗技巧" icon="menu">
            <div slot="body">
                <p class="tips">{{model.battleTips}}</p>
            </div>
        </hero-card>
        <hero-card title="团战思路" icon="menu">
            <div slot="body">
                <p class="tips">{{model.teamTips}}</p>
            </div>
        </hero-card>
        <hero-card title="英雄关系" icon="hero">
            <div slot="body" v-if="model.relations">
                <div class="py-2">
                    <div>最佳拍档</div>
                    <div v-for="(item,key) in model.relations.partner" :key="key"
                    class="d-flex mt-3"
                    @click="$router.push(`/hero/${item.hero._id}`)"
                    >
                        <img class="avatar"  :src="item.hero.avatar" alt="">
                        <p class="tips my-0 pl-3 flex-1">{{item.tip}}</p>
                    </div>
                </div>
            </div>
        </hero-card>
        
    </div>
</template>

<script>
    import HeroCard from '../HeroListCard.vue/HeroCard.vue'
    
    export default {
        props:{
            model:{type:Object,required:true}
        },
        data(){
            return {
                currentIndex: 0
            }
        },
        computed:{
            currentSkill(){
                if(this.model.skills){
                    return this.model.skills[this.currentIndex]
                }
                return null
            }
        },
        components:{
            HeroCard
        }
    }
</script>

<style lang="scss" scoped>
@import 'assets/scss/_variables.scss';
    .btn{
        background-color: #FCFCFC;
        border: 1px solid rgba(33,33,33,0.1);
        border-radius: 0.3846rem;
    }
    .skill{

        .icon{
            width: 16vw;
            height: 16vw;
            border-radius: 50%;
            padding: 1px;
            border: 3px solid rgba($color: #000000, $alpha: 0.0);
            &.active{
                border-color: map-get($colors, 'primary');
            }
        }
    }
    .item-icon{
        width: 13vw;
        height: 13vw;
        border-radius: 50%;
    }
    .easy{
        border-bottom: 1px solid $border-color;
    }
    .avatar{
        width: 13vw;
        height: 13vw;
    }
</style>